<template>
	<div id="charge_type_add_edit" class="dialog animated" :class="open? 'fadeIn':'fadeOut'" v-show="show">
		<div class="panel animated" :class="open? 'zoomIn':''">
			<div class="title">
				{{isAdd? '新增年级' : '编辑年级'}}
				<div class="close" @click="closePage()"></div>
			</div>
			<div class="form">
				<div class="row">
					<label class="label">
						<span>*</span>
						年级名称
					</label>
					<el-input v-model="param.name" id="name" style="width: 4.8rem;" maxLength="20"
						 placeholder="请输入年级名称" clearable></el-input>
					<div class="explain">
						支持1-20个字母，汉字，数字和（）_-符号的输入
					</div>
				</div>
				
				<div class="row">
					<label class="label">备注</label>
					<el-input id="remark" v-model="param.mark" type="textarea"
					  	:rows="4" style="width: 4.8rem;padding-top: 0.07rem;padding-bottom: 0.04rem;" placeholder="请输入备注" maxLength="100">
					</el-input>
					<div class="explain">
						支持1-100个字母，数字，汉字，标点符号的输入
					</div>
				</div>
				
			</div>
			<div class="btn_div">
				<div class="btn_sure" @click="sure()">确 认</div>
				<div class="btn_cancel" @click="closePage()">取 消</div>
			</div>
		</div>
	
	</div>
</template>

<script>
var vm,dict;
var param = {
	name : "",
	mark : "",
	campusId : "",
	_wait : ""
}
export default {
	data : function() {
		return {
			show : false,
			open : false,
			param : {},
			isAdd : true,
		}
	},
	methods : {
		init : function(gradeType) {
			vm.show = true;
			vm.open = true;
			
			vm.isAdd = (gradeType? false : true);
			
			//有传收费类型对象,则是编辑,否则新增
			if(gradeType) {
				vm.param = tool.clone(gradeType);
				vm.param._wait = "";
			} else {
				vm.param = tool.clone(param);
				vm.param.campusId = vm.$store.state.campusId;
			}
		},
		cancel : function() {
			vm.open = false;
			
			setTimeout(function() {
				vm.show = false;
			},500);
		},
		closePage : function() {
			//返回结果状态     close:关闭     ok:新增成功
			vm.$emit('callback', "close");
			vm.cancel();
		},
		sure : function() {
			//验证规则
			var rules = [{
				judge : /^[0-9a-zA-Z\u4E00-\u9FA5（）_-]{1,20}$/.test(vm.param.name),
				focus : $("#charge_type_add_edit #name"),
				tips : "请输入1-20位由字母汉字数字（）_-组成的名称"
			}];
			
			if(!tool.validate(rules)) {
				return;
			}
			
			if(vm.isAdd) {
				//新增
				api.gradeTypeAdd(vm.param).then(function(data) {
					tool.message({showClose: true, message: "新增年级成功", type: 'success'});
					vm.$emit('callback', "ok");
				    vm.cancel();
				});
			} else {
				//编辑
				api.gradeTypeEdit(vm.param).then(function(data) {
					tool.message({showClose: true, message: "编辑年级成功", type: 'success'});
					vm.$emit('callback', "ok");
				    vm.cancel();
				});
			}
			
		},
	},
	created : function() {
		vm = this;
	}
}
</script>

<style lang="scss">
#charge_type_add_edit {
	.el-textarea__inner {
		font-size: 0.16rem;
		font-family: "微软雅黑";
	}
}
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
	
	.panel {
		width: 7rem;
	}
	.form {
		padding: 0 0.3rem;
		font-size: 0.16rem;
		color: #666666;
	}
	.row {
		line-height: 0.5rem;
	}
	.label {
		width: 0.9rem;
		display: inline-block;
		text-align: right;
		margin-right: 0.15rem;
		vertical-align: top;
	}
	.label>span {
		color: red;
		display: inline-block;
		width: 0.1rem;
		position: relative;
		top: 0.02rem;
	}
	.explain {
		color: #999999;
		font-size: 0.14rem;
		line-height: 0.2rem;
		padding-left: 1.1rem;
		padding-bottom: 0.08rem;
	}
</style>